import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'mobx-react';
import { HashRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
import { asyncComponent } from 'react-async-component';
import '../hrm4login';
import './style';
import stores from './stores';

const coms = {
  Login: asyncComponent({
    resolve: () => import('./components/login')
  }),
  Setting: asyncComponent({
    resolve: () => import('./components/setting')
  }),
  Preview: asyncComponent({
    resolve: () => import('./components/preview')
  })
};

class Root extends React.Component {
  render() {
    return (
      <Provider {...stores}>
        <Router>
          <Route
            name="main"
            path="/"
            render={props => {
              return (
                <Switch>
                  <Route name="login" path="/login" component={coms.Login} />
                  <Route name="setting" path="/setting" component={coms.Setting} />
                  <Route name="preview" path="/preview" component={coms.Preview} />
                  <Redirect to={{ pathname: '/login', search: props.location.search }} />
                </Switch>
              );
            }}
          />
        </Router>
      </Provider>
    );
  }
}

ReactDOM.render(<Root />, document.getElementById('root'));
